<template>
	<view v-if="goods_info.goods_name">
		<!-- 解决数据没请求成功之前页面闪烁的问题 -->
		<view class="swiper-view">
			<swiper class="swiperClass" circular="true" indicator-dots="true" autoplay="true">
				<swiper-item class="swiper-item" v-for="(item,index) in swipers" :key="index" >
					<image class="imageClass" :src="item.pics_sma" @click="bigImgClick(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="price-view">￥{{goods_info.goods_price}}</view>
		<view class="info-view">
			<view class="left-view">
				<view class="name-view">{{goods_info.goods_name}}</view>
				<view class="wuliu-view">快递费：免运费</view>
				<!-- <view class="wuliu-view">快递费：免运费---{{cart.length}}</view> -->
			</view>
			<view class="right-view">
				<uni-icons type="star" color="gray" size="23"></uni-icons>
				<view class="save-view">收藏</view>
			</view>
		</view>
		<view class="html-class">
			<rich-text  :nodes="goods_info.goods_introduce"></rich-text>
		</view>
		<view class="goods-nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	//1、导入辅助函数 从 vuex 中按需导出 mapState mapMutations mapGetters辅助方法
	import {mapState,mapMutations,mapGetters} from 'vuex'
	
	export default {
		computed:{
			//2、调用辅助函数 通过模块路径去映射需要的成员 使用对象展开运算符将此对象混入到外部对象中
			// 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
			// ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
			 ...mapState('m_cart',['cart']),
			 
			 // 把 m_cart 模块中名称为 total 的 getter 映射到当前页面中使用
			 ...mapGetters('m_cart', ['total'])
		},
		// 使用普通函数的形式定义的 watch 侦听器，在页面首次加载后不会被调用。因此导致了商品详情页在首次加载完毕之后，不会将商品的总数量显示到商品导航区域：
		// 为了防止这个上述问题，可以使用对象的形式来定义 watch 侦听器
		watch: {
			// 1. 监听 total 值的变化，通过第一个形参得到变化后的新值
			// 定义 total 侦听器，指向一个配置对象
			total: {
				handler(newVal){
					// 2. 通过数组的 find() 方法，找到购物车按钮的配置对象
					const findresult = this.options.find(x => x.text === '购物车')
					if (findresult){
						// 3. 动态为购物车按钮的 info 属性赋值
						findresult.info = newVal
					}
				},
				 // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
				 immediate: true
			}
		},
		data() {
			return {
				goods_id : 0,
				//中图
				swipers: [],
				goods_info : {},
				
				options: [
					{
				      icon: 'shop',
				      text: '店铺',
				      // info: 2,
				      infoBackgroundColor:'#007aff',
				      infoColor:"red"
					}, 
					{
				      icon: 'cart',
				      text: '购物车',
				      info: 0
					},
				],
				buttonGroup: [
					{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			};
		},
		onLoad(options) {
			this.goods_id = options.goods_id
			this.getGoodsdetail()
		},
		methods:{
			 // 通过 mapMutations 这个辅助方法 把 m_cart 模块中的 addToCart 方法映射到当前页面使用
			...mapMutations('m_cart', ['addToCart']),
				
			async getGoodsdetail(){
				const {data:res} = await uni.$http.get('/goods/detail?goods_id='+this.goods_id)
				if(res.meta.status !== 200) {
					return uni.$showErrMsg()
				}
				this.swipers = res.message.pics
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g,'<img style="display:block;" ').replace(/<webp /g,'jpg')
				this.goods_info = res.message
				console.log(this.swipers,this.goods_info )
			},
			bigImgClick(item){
				const urls = this.swipers.map(item=>{
					return item.pics_big_url
				})
				console.log(item.pics_big_url,urls)
				uni.previewImage({
					current: item.pics_big_url,
					urls: urls
				})
			},
			onClick (e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
				if(e.content.text == '购物车'){
					uni.switchTab({
						url:'/pages/cart/cart'
					})
				}
			},
			buttonClick (e) {
				if(e.content.text == '加入购物车'){
					// 组织一个商品的信息对象  { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
					const goods = {
						 goods_id: this.goods_info.goods_id, 
						 goods_name: this.goods_info.goods_name, 
						 goods_price: this.goods_info.goods_price,
						 goods_count: 1, 
						 goods_small_logo: this.goods_info.goods_small_logo, 
						 goods_state : true
					}
					//调用购物车模块的addToCart方法
					this.addToCart(goods)
				}
			}
		}
	}
</script>

<style lang="scss">
	.swiper-view{
		.swiperClass{
			height: 600rpx;
			.swiper-item{
				.imageClass{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.price-view{
		padding: 10px;
		color: #C00000;
	}
	.info-view{
		padding: 0 10px;
		display: flex;
		.left-view{
			margin-right: 10px;
			.name-view{
				font-size: 15px;
			}
			.wuliu-view{
				font-size: 12px;
				color: gray;
				margin: 10px 0;
			}
		}
		.right-view{
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: conter;
			align-items: center;
			width: 120px;
			font-size: 12px;
			color: gray;
			border-left: 1px solid #efefef;
		}
	
	}
	.html-class{
		padding-bottom: 50px;
	}
	.goods-nav{
		width: 100%;
		position: fixed;
		bottom: 0;
		border-top: 1px solid #ccc;
		z-index: 2;
	}
</style>
